<template>
  <div class="login-container">
    <div class="login-logo">
      <img src="@/assets/img/login_wise.png" alt="Login Logo" />
    </div>
    <div class="welcome">
      <h2>欢迎回来</h2>
      <p class="login-prompt">请登录您的学生账号</p>
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field
          v-model="studentNo"
          name="studentNo"
          autocomplete="off"
          left-icon="user-o"
          :left-icon-style="{ color: '#9CA3FF', marginRight: '12px' }"
          placeholder="请输入学号"
          :rules="[{ required: true, message: '请填写学号' }]"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="password"
          type="password"
          name="password"
          autocomplete="off"
          left-icon="lock"
          :left-icon-style="{ color: '#9CA3FF', marginRight: '12px' }"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>

      <div class="remember-forgot">
        <van-checkbox v-model="rememberMe" icon-size="16px" shape="square" class="remember-me"
          >记住我</van-checkbox
        >
        <a class="forgot-password" @click="onForgotPassword">忘记密码?</a>
      </div>

      <div class="login-button">
        <van-button block type="primary" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>

    <div class="register-tip">
      <p>如需注册用户，请联管理员</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { aesEncrypt } from '@/utils/tools'
import { ref } from 'vue'
import { showToast } from 'vant'
// import router from '@/router'
import { useRouter } from 'vue-router'
import { login } from '@/api/login'
import useUserStore from '@/stores/user'

const userStore = useUserStore()
const router = useRouter()

const studentNo = ref('')
const password = ref('')
const rememberMe = ref(false)

const onSubmit = async (form: any) => {
  console.log('submit', form.studentNo, form.password, aesEncrypt(form.password))
  // showToast('登录成功')
  const res = await login({
    studentNo: form.studentNo,
    password: aesEncrypt(form.password),
  })
  userStore.setToken(res.data.token)
  userStore.setUserInfo(res.data.studentInfo)
  router.replace('/home')
}

const onForgotPassword = async () => {
  if (!studentNo.value) {
    showToast('请先输入学号')
    return
  }
  router.push(`/forgetPsd?studentNo=${studentNo.value}`)
}
</script>

<style scoped>
.login-container {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #eff6ff, #f4f9ff, #f9fbff);
  min-height: 100vh;
}

.login-logo {
  text-align: center;
  margin: 20px 0;
}

.login-logo img {
  max-width: 200px;
  height: auto;
}

.welcome {
  text-align: center;
  margin: 30px 0 40px;
}

.welcome h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.login-prompt {
  font-size: 12px;
}
:deep(.van-cell-group) {
  &:not(:first-child) {
    margin-top: 10px;
  }
  .van-field__left-icon {
    .van-icon {
      color: #9ca3af;
      margin-right: 10px;
    }
  }
}
.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.remember-me {
  font-size: 12px;
}

.forgot-password {
  color: #1989fa;
  font-size: 14px;
}

.login-button {
  margin: 30px 0;
}

.register-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
  margin-top: 20px;
}
</style>
